<template>
  <div class="c-pb48 c-bg-sgray">
    <div class="c-bg-white">
      <div class="c-flex-row c-aligni-center c-justify-sb">
        <div class="c-flex-row c-aligni-center">
          <div class="tab-item c-p c-flex-row c-h c-flex-shrink0 c-flex-center c-ph52 c-pv18" v-for="(item,index) in tabList" :key="index" @click="clickTab(item.index)">
            <div :class="tabIndex == item.index ? 'c-fc-xblack c-fs26' : 'c-fc-sblack c-fs24'">{{item.title}}</div>
            <div v-show="tabIndex == item.index" class="tab-icon theme-bg"></div>
          </div>
        </div>
        <div v-if="tabIndex != 2" class="c-flex-row c-aligni-center c-mr36" @click="setCleraErro">
          <div class="iconfont c-fs24 c-fc-gray">&#xe832;</div>
        </div>
      </div>
    </div>
    <!-- <div v-if="tabIndex==0" class="c-flex-row c-aligni-center c-fs24 c-mh28 c-hh80 c-pt20">
      <span class="c-w0 c-flex-grow1">答对后自动移除错题</span>
      <div @click="changeMoveList">
        <inline-x-switch id="switch" key="2" :themeColor="fcColor" v-model="enableAutoMoveQuestion"></inline-x-switch>
      </div>
    </div> -->
    <div class="c-ph24 c-pv20">
      <div class="c-flex-row c-aligni-center c-mb24 c-bg-white c-br12 c-ph24 c-pv24" v-for="(item,index) in wrongList" :key="index">
        <div class="c-flex-column c-flex-grow1" @click="clickGoRevise(item, tabIndex, 1)">
          <div class="c-flex-row c-aligni-start">
            <span v-if="tabIndex == 2" class="c-fs20 c-ww100 c-hh30 c-fc-white c-flex-row c-flex-center wrong-tip">错题订正</span>
            <span :class="tabIndex==2 ? 'c-pl10' : ''" class="c-fs24 c-flex-grow1 c-w0 c-text-ellipsis1">{{item.name}}</span>
          </div>
          <div v-if="tabIndex == 2">
            <div @click="clickGoRevise(list, tabIndex, 2)" v-for="(list, listInd) in item.data" :key="listInd" class="c-flex-row c-aligni-center c-justify-sb c-fc-sblack c-fs22 c-mt12">
              <div class="c-text-ellipsis1 c-w0 c-flex-grow1 c-mr10">{{list.name}}</div>
              <div>
                <span>共错{{list.wrongNum}}题</span>
                <span>去订正</span>
                <i class="iconfont c-fs20 c-fc-gray">&#xe60e;</i>
              </div>
            </div>
          </div>
          <div v-else-if="tabIndex == 1||tabIndex == 0" class="c-flex-row c-aligni-center c-fs18 c-fc-gray c-mt12">
            <span class="c-flex-grow1 c-w0">共{{tabIndex == 1?item.questionNum:item.wrongNum}}题错题去订正</span>
          <!-- <span>去订正</span>
            <i class="iconfont c-fs20 c-fc-gray">&#xe60e;</i> -->
          </div>
        </div>
        <div v-if="tabIndex == 1">
          <i class="iconfont c-fs28 theme-fc">&#xe627;</i>
        </div>
        <div v-if="tabIndex == 0" @click="removeError(item.libraryId)">
          <i class="iconfont c-fs28 theme-fc">&#xe6b3;</i>
        </div>
      </div>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无错题"></loading-status-tem>
    </div>
    <cj-popup v-model="showSet" round position="bottom" title="错题管理" :closeable="true" @closed="closeSet">
      <!-- <open-modal class="c-pz10000 modal-class" :openModal="showSet" @closeModal="closeSet"> -->
      <!-- <div class="c-bg-white c-pt20 c-pb32 c-br-tr16 c-br-tl16 c-p"> -->
      <!-- <div class="c-bd-b1">
          <div class="c-pa c-p-t0 c-p-l16 c-hh76 c-fc-sgray c-flex-row c-flex-center">
            <i class="iconfont show c-fs20 c-ml10" @click="backSet">&#xe600;</i>
          </div>
          <div class="c-fs28 c-fc-xblack c-textAlign-c c-fw600 c-pb20">错题管理</div>
        </div> -->
      <div class="c-ph24 c-pt10">
        <div class="c-fs24 c-fc-gray">错题移除</div>
        <div class="c-flex-row c-aligni-center c-fs24 c-hh80">
          <span class="c-w0 c-flex-grow1 c-fc-xblack">答对后是否移除错题</span>
          <div>
            <x-switch id="switch" :themeColor="$getThemeColor()" title="" v-model="enableAutoMoveQuestion" @on-change="changeSwitch" :value-map="[false, true]"></x-switch>
          </div>
        </div>
        <div class="c-flex-row c-aligni-center c-fs24 c-pb40">
          <span class="c-flex-grow1 c-w0 c-fs26 c-fc-xblack">连续答对几次，自动移除我的错题</span>
          <div class="c-flex-row c-flex-center">
            <div class="operation-button sub-button c-flex-row c-flex-center">
              <span class="iconfont" :class="number==1?'c-fc-gray':'c-fc-xblack'" @click="clickSub">&#xe839;</span>
            </div>
            <input type="text" v-model="number" @change="changeNum" pattern="[1-9]*" class="c-bg-white c-fc-xblack">
            <div class="operation-button add-button c-flex-row c-flex-center">
              <span class="iconfont" @click="clickAdd">&#xe838;</span>
            </div>
          </div>
        </div>
        <div class="c-fs24 c-fc-gray">其他</div>
        <div class="c-flex-row c-aligni-center c-bg-white c-hh80">
          <div class="c-flex-column c-flex-grow1">
            <div class="c-flex-row c-aligni-start">
              <span class="c-fs26 c-flex-grow1 c-w0" @click="clearError">清空我的错题</span>
            </div>
          </div>
          <div>
            <div class="c-fs24 c-fc-gray iconfont">&#xe635;</div>
          </div>
        </div>
      </div>
      <!-- </div> -->
    </cj-popup>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
// import { InlineXSwitch } from 'ckjrweb-mp-ui/src/components/index';
// import OpenModal from '@/components/templates/common/openModal.vue';
import { XSwitch } from 'ckjrweb-mp-ui/src/components/index';
import {
  utilJs
} from "@/utils/common.js";
let pageIndex = 0;
let clickFlag = true
let LIMIT = 10;
export default {
  name: "List",
  components: {
    loadingStatusTem,
    XSwitch
  },
  props: [],
  data() {
    return {
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      theme: localStorage.getItem("colorName") || "mb5_default",
      themeName: localStorage.getItem('themeName') ? localStorage.getItem('themeName') : 'mb5',
      dataStatus: 'HAS_MORE_DATA',
      wrongList: [],
      tabIndex: 0,
      fcColor:localStorage.getItem("mb7ThemeColor"),
      enableAutoMoveQuestion:false,
      number:0,
      tabList:[{title: '练习', index: 0}, {title: '考试', index: 1}, {title: '打卡', index: 2}],
      showSet:false,
      enableAuto:false,
      num:0
    };
  },
  computed: {
    cloroRGB() {
      return utilJs.getRgbStr(localStorage.getItem("colorName") || 'mb5_default', '', 0.5);
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    clearError() {
      this.showSet = false
      let $this = this
      this.$cjConfirm({
        title: '',
        titleCenter: true, //标题是否居中
        message: '是否确认清空练习、考试列表的所有错题?', //弹窗内容
        messageCenter: true, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: true, //是否显示取消按钮
        cancelButtonText: '', //取消按钮文本
        confirmButtonText: '', //确认按钮文本
        onConfirm() {
          utilJs.postMethod(global.apiurl + 'itemBank/removeAllMisCollect', {
          },
            res => {
              $this.$showCjToast({
                text: res,
                type: "success"
              });
              pageIndex = 1;
              if ($this.tabIndex == 2) {
                $this.getWrongList();
              } else if ($this.tabIndex == 1) {
                $this.getPaperMistakeList()
              } else {
                $this.getExamWrongList();
              }
            },
            failRes => {
            }
          )
        }, //确认事件回调
        onCancel: null, //取消事件回调
      })
    },
    closeSet() {
      this.changeMoveList()
    },
    clickAdd() {
        this.number++
    },
    clickSub() {
      if (this.number <= 1) {
        return
      } else {
        this.number--
      }
    },
    changeNum() {
      if (this.number <= 1) {
        this.number = 1
      }
    },
    setCleraErro() {
      this.showSet = true
    },
    backSet() {
      this.enableAutoMoveQuestion = this.enableAuto
      // this.num = this.num
      this.showSet = false
    },
    changeSwitch() {
      // this.enableAutoMoveQuestion = index
      // this.num = this.num
      console.log(this.enableAutoMoveQuestion)
    },
    autoMoveQuestionConfig() {
    //获取
      utilJs.getMethod(`${global.apiurl}itemBank/autoMoveQuestionConfig`, res => {
        this.enableAutoMoveQuestion = res.enableAutoMoveQuestion == 1 ? true : false
        this.number = res.number
        this.enableAuto = res.enableAutoMoveQuestion == 1 ? true : false
        this.num = res.number
      },
        failRes => {
        }
      );
    },
    clickTab(index) {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      if (this.tabIndex == index) {
        return;
      }
      this.tabIndex = index;
      pageIndex = 1;
      this.wrongList = [];
      if (this.tabIndex == 2) {
        this.getWrongList();
      } else if (this.tabIndex == 1) {
        this.getPaperMistakeList()
      } else {
        this.getExamWrongList();
      }
    },
    changeMoveList() {
      let $this = this
      if (!clickFlag) {
        return
      }
      clickFlag = false
      utilJs.postMethod(global.apiurl + 'itemBank/setEnableRemoveError',
      {
        enableAutoMoveQuestion:this.enableAutoMoveQuestion ? 1 : 0,
        number:this.number
      }, function (res) {
        clickFlag = true
        $this.showSet = false
      },
        failRes => {
          clickFlag = true
          $this.showSet = false
        }
      );
    },
    removeError(libraryId) {
      let $this = this
      this.$cjConfirm({
        title: '',
        titleCenter: true, //标题是否居中
        message: '是否删除此练习卷', //弹窗内容
        messageCenter: true, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: true, //是否显示取消按钮
        cancelButtonText: '', //取消按钮文本
        confirmButtonText: '', //确认按钮文本
        onConfirm() {
          utilJs.postMethod(global.apiurl + 'itemBank/removeErrorPractise', {
            libraryId:libraryId
          },
            res => {
              $this.$showCjToast({
                text: res,
                type: "success"
              });
              pageIndex = 1;
              $this.getExamWrongList()
            },
            failRes => {
            }
          )
        }, //确认事件回调
        onCancel: null, //取消事件回调
      })
    },
    //前去订正
    clickGoRevise(wItem, tabIndex, level) {
      if (!(tabIndex == 2 && level == 1)) { //打卡点击一级头部不跳转
        if (this.tabIndex == 2) {
          this.$routerGo(this, "push", {
            path: "/homePage/clockIn/choiceQue",
            query: {
              curHwId: wItem.hwId,
              curNum: 1,
              isRevise: 1,
              isFromWrong: 1,
              examMainId: wItem.examMainId,
              curDate: wItem.startDay ? wItem.startDay.substr(0, 10) : ''
            }
          });
        } else if (tabIndex == 0) {
          //可能先免费，后收费。没有权限需重新购买
          if (wItem.permission == null || wItem.permission == false) {
            this.$routerGo(this, "push", {
              path: "/homePage/itemBank/questionSaleDetail?",
              query: {
                libraryId: wItem.libraryId
              }
            });
          }
          if (Number(wItem.wrongNum) == 0) {
            this.$showCjToast({
              text: "暂无错题需要订正",
              type: "warn",
            });
            return;
          }
          this.$routerGo(this, "push", {
            path: "/member/myWrongTopic/practiceWrong/practiceWrongList",
            query: {
              rId: wItem.rId,
              practiceId: wItem.libraryId
            }
          });
        } else {
          this.$routerGo(this, "push", {
            path: "/member/myWrongTopic/examWrongTopic/examinationWrongEntry",
            query: {
              topicName: wItem.name,
              topicId: wItem.topicId,
              continueNum: wItem.continueNum,
              examMainId: wItem.examMainId,
              isTest: wItem.isTest,
              questionNum: wItem.questionNum,
              paperId:wItem.paperMainId
            }
          });
        }
      }
    },
    //旧数据页面
    goExamWorngList() {
      this.$routerGo(this, "push", {
        path: "/member/myWrongTopic/examWrongTopic/examWorngList",
        query: {}
      });
    },
    //获取我的错题列表
    getWrongList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}signCard/wrongExamList?page=${pageIndex}&limit=${LIMIT}`, res => {
        if (pageIndex == 1) {
          this.wrongList = res.data;
        } else {
          this.wrongList = [...this.wrongList, ...res.data];
        }
        if (res.data && (res.data.length < LIMIT)) {
          this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
      },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    // 获取考试错题集
    getPaperMistakeList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}paper/paperMistakeList?page=${pageIndex}`, res => {
        if (pageIndex == 1) {
          this.wrongList = res.data;
        } else {
          this.wrongList = [...this.wrongList, ...res.data];
        }
        if (res.next_page_url == null) {
          if (this.wrongList.length == 0) {
            this.dataStatus = 'NO_DATA';
          } else {
            this.dataStatus = 'NO_MORE_DATA';
          }
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
      },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    //获取我的测评错题集
    getExamWrongList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}itemBank/myIncorrectPractises?page=${pageIndex}`, res => {
        if (pageIndex == 1) {
          this.wrongList = res.list.data;
        } else {
          this.wrongList = [...this.wrongList, ...res.list.data];
        }
        if (res.list.next_page_url == null) {
          if (this.wrongList.length == 0) {
            this.dataStatus = 'NO_DATA';
          } else {
            this.dataStatus = 'NO_MORE_DATA';
          }
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
      },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "我的错题", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("我的错题", "", shareUrl, "");
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.wrongList.length > 0) {
          if (this.tabIndex == 2) {
            this.getWrongList();
          } else if (this.tabIndex == 1) {
            this.getPaperMistakeList()
          } else {
            this.getExamWrongList();
          }
        }
      });
    },
  },
  beforeRouteEnter(to, from, next) {
    if (from.path.includes('/member/myWrongTopic/examWrongTopic')) {
      next(vm => {
        pageIndex = 1;
        vm.tabIndex = 1;
        vm.dataStatus = 'HAS_MORE_DATA';
        vm.wrongList = [];
        vm.getPaperMistakeList();
      });
    } else if (from.path.includes('/homePage/clockIn')) {
      next(vm => {
        pageIndex = 1;
        vm.dataStatus = 'HAS_MORE_DATA';
        vm.wrongList = [];
        // if (vm.companyAuth && vm.companyAuth.enableExamModule == 1) {
        //   vm.tabIndex = 1;
        //   vm.getPaperMistakeList();
        // } else
        if (vm.companyAuth && vm.companyAuth.enableSignCardModule == 1) {
          vm.tabIndex = 2;
          vm.getWrongList();
        }
      });
    } else {
      next(vm => {
        pageIndex = 1;
        vm.tabIndex = 0;
        vm.dataStatus = 'HAS_MORE_DATA';
        vm.wrongList = [];
        vm.getExamWrongList();
      });
    }
  },
  activated() {
    setDocumentTitle("我的错题");// eslint-disable-line
    this.wechatShare();
    this.autoMoveQuestionConfig()
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.wrong-tip {
  border-radius: 0px 0.4rem 0rem 0.4rem;
  background-color: #f7bf75;
}
.c-fc-lighto {
  color: #f7bf75;
}
.tab-icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-right: 1.1rem;
  height: 0.15rem;
  width: 0.8rem;
  border-radius: 3px;
}
.modal-class {
  position: fixed !important;
  z-index: 100000 !important;
}
input{
    width: 1.7rem;
    height: 0.8rem;
    text-align: center;
    font-size: 0.5rem;
    outline: none;
    -webkit-appearance: none;
    border-radius: 0.2rem;
    border: none;
}
</style>
